import {useState, memo, useMemo} from 'react'; // 导入需要的hooks
import {View, Button, Text} from 'react-native';

export default function App() {
  const [num, setNum] = useState(0);

  // 使用useMemo缓存计算结果
  const count = useMemo(() => {
    console.log('useMemo'); // 只在依赖项变化时执行
    return num * 2; // 计算num的奇偶性
  }, [num]); // 依赖num，只有num变化时才重新计算

  // const getCount = () => {
  //   console.log('======getCount =========');

  //   return num * 2;
  // };

  return (
    <View>
      <Button title={num.toString()} onPress={() => setNum(num + 1)} />
      {/* num 改变  导致子组件重新创建 */}
      {/* 
      校长 问班主任 ： 我们班今天上课 来了多少人  -> 班主任 数一遍人数  -> 40人
      老师 问班主任 ：-> 40人
      领导 问班主任 ：-> 40人
       */}
      <MemoSOn num={num} count={count} />
      <MemoSOn num={num} count={count} />
      <MemoSOn num={num} count={count} />
      <MemoSOn num={num} count={count} />
      <MemoSOn num={num} count={count} />
      <MemoSOn num={num} count={count} />
    </View>
  );
}

const Son = ({num, count}: {num: number; count: number}) => {
  console.log('son 创建');

  return (
    <View>
      <Text>Son num {num.toString()}</Text>
      <Text>Son count {count.toString()}</Text>
    </View>
  );
};

const MemoSOn = memo(Son);
